<template>
    <div class="login" :style="winSize">
        <Row>
            <Col span="24">
            <div class="content">
                <Form ref='data' :model="data" class="card-box loginform" :rules="rule_data" :style="formOffset">
                    <icon name="qr" scale="3" class="qrclas" @click.native="showQR()"></icon>
                    <h3 class="title">帐号登录</h3>
    
                    <Form-item prop="username">
                        <Input type="text" placeholder="登录名" v-model="data.username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" placeholder="密码" v-model="data.password" @on-enter="loginByPassword('data')">>
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    </Form-item>
                    <Button type="primary" long @click="loginByPassword('data')" :loading="loading">
                        <span v-if="!loading">登录</span>
                        <span v-else>登录中...</span>
                    </Button>
                    <!--<hr style="margin-top:15px;">-->
                    <div class="bottom">
                       <!--  <span>忘记密码</span> -->
                        <span>
                            <router-link to="/register">免费注册</router-link>
                        </span>
                    </div>
                </Form>
    
            </div>
            </Col>
        </Row>
        <ddqr propUrl="qrLogin" strTitle="钉钉扫码登录" @qrRes="getQrRes"></ddqr>
    </div>
</template>

<script>

export default {
    name: 'login',
    data() {
        return {
            winSize: {
                width: '',
                height: ''
            },

            formOffset: {
                position: 'absolute',
                left: '',
                top: ''
            },

            data: {
               
                password: 'star',
                type: 'password',
                username:'admin'
            },

            rule_data: {
                username: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空！', trigger: 'blur' },
                ],
            },
            loading: false,
        }
    },
    methods: {
        getQrRes(res) {
            this.afterLogin(res);
        },
        showQR() {
            this.$bus.emit('showDDQRModel');
        },
        setSize() {
            this.winSize.width = $(window).width() + "px";
            this.winSize.height = $(window).height() + "px";

            this.formOffset.left = (parseInt(this.winSize.width) / 2 - 175) + 'px';
            this.formOffset.top = (parseInt(this.winSize.height) / 2 - 178) + 'px';
        },
        loginMain() {
            this.loading = true;
            // this.afterLogin({errorCode:0,data:{token:'ccc',realName:'star'}})
            
            this.axios.post("/login/login", this.data, { timeout: 20000 }).then((res) => {
                this.afterLogin(res);
                this.loading = false;
            }).catch((error) => {
                this.loading = false;
            })
        },
        afterLogin(res) {
            if (res.errorCode == 0) {
                // this.$Message.success(res.message);
                this.$Message.success("登录成功！");
                //这里使用同步更新用户信息的方法，
                //避免异步保存导致的用户信息还未保存完成时跳转回需要认证页面，路由获取不到用户信息，重新跳转回登录页面
                console.log(res.data);
                //res.data.token=res.data.access_token;
                this.$store.dispatch('update_userinfo_sync', {
                    userinfo: res.data
                });
                //jsonp(process.env.OAUTH_PATH + "/oauth/setCookies", { callback: "callback", t: res.data.access_token }).then((res) => {});
                this.toBack();
                this.loading = false;

            } else {
                this.$Notice.error({
                    title: '登录错误',
                    desc: res.message
                });
            }
        },
        toBack() {
            // if (this.$route.query.redirect) {
            //     this.$router.push(this.$route.query.redirect);
            // } else {
            //     this.$router.push('/');
            // }
            console.log('/')
            this.$router.push('/');
        },
        loginByPassword(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.data.type = 'password';
                    this.loginMain();

                } else {
                    this.$Message.error('请录入您的信息!');
                }
            })
        },

        loginByToken(token) {
            this.data.type = 'token';
            this.data.token = token;
            this.loginMain();
        }
    },
    created() {
        this.setSize();
        $(window).resize(() => {
            this.setSize();
        });
    },
    mounted() {
        if (this.$store.getters.getToken) {
            this.$router.push('/')
        }
        // jsonp(process.env.OAUTH_PATH + "/oauth/getToken", { callback: "callback" }).then((res) => {
        //     console.log("JSONP的回调");
        //     if (res && res.token) {
        //         this.loginByToken(res.token);
        //     }
        // });
    }
}
</script>

<style scoped lang='less'>
.login {
    background: #4fa1a4;
    border-bottom: 1px #fff solid;
    .ivu-form-item {
        margin-bottom: 20px;
    }
    .bottom {
        float: right;
        margin-top: 10px; // color: red;
    }
    .bottom span {
        margin-left: 20px;
    }
    .title {
        // padding-left: 30px;
        font-size: 20px;
    }
    .card-box {
        box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin-bottom: 100px;
        background-color: #F9FAFC;
        border: 2px solid #8492A6;
    }

    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginform {
        width: 350px;
        padding: 25px 35px 15px 35px;
        position: relative;
    }
    .qrclas {
        position: absolute;
        right:5px;
        top:10px;
    }
}
</style>
